<template>
  <p class="start"><span>文库</span>
    <el-button class="addNew" size="small" type="primary" @click="showLibraryDialog()">新建</el-button>
  </p>
  <div class="navigation">
    <div @click="changeNavigation()" :class="{'active':flag}">我创建的</div>
    <div @click="changeNavigation()" :class="{'active':!flag}">邀请协作的</div>
  </div>
  <div class="box">
    <el-card class="house" v-for="(item, index) in houseList" :key="item.id">
      <template #header>
        <div class="card-header">
          <span class="nameBox">
            <span>{{ item.name }}</span>
            <!--            <el-icon class="nameIcon" v-if="item.share_role === register"><Lock/></el-icon>-->
            <!--            <el-icon class="nameIcon" v-else-if="item.share_role === all"><Unlock/></el-icon>-->
            <!--            <el-icon class="nameIcon" v-else><User/></el-icon>-->
          </span>
          <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-icon><MoreFilled/></el-icon>
        </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="EditPen" @click="openRename(item)">重命名</el-dropdown-item>
                <!--                <el-dropdown-item :icon="Lock" @click="openRole(item)">权限</el-dropdown-item>-->
                <el-dropdown-item :icon="DeleteFilled" @click="openDelete(item)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
      <div class="detail" @click="goDetail(item.id)">
        <img class="imgDetail" src="@/assets/1.jpg" alt="" v-if="item.color === null">
        <img class="imgDetail" :src="item.color" v-else alt="">
        <div class="textDetail">
          <p class="time"><span>{{ item.createTime }}</span></p>
          <p class="info" v-if="item.description === null">文库介绍：<span>还没有文库介绍</span></p>
          <p class="info" v-else>文库介绍：<span>{{ item.description }}</span></p>
        </div>
      </div>
    </el-card>
  </div>
  <el-pagination class="page" background layout="prev, pager, next" :total="total"/>


  <!-- 新建文库弹出框 -->
  <el-dialog v-model="libraryVisible" title="新建文库" width="33vw">
    <el-form :model="house">
      <el-form-item>
        <p class="summary">文库封面</p>
        <div class="imgBox">
          <el-upload
              class="uploadImg"
              action=""
              :auto-upload="false"
              :on-change="handleChange"
              v-if="coverImg === ''"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
          <img class="uploadImg" :src="coverImgSrc" alt="" v-else>
          <div class="defaultImg">
            <div class="imgBig">
              <div class="imgSmall"><img src="@/assets/cover/1.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/2.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/3.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/4.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/5.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/6.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/1.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/2.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/3.png" alt=""></div>
              <div class="imgSmall"><img src="@/assets/cover/4.png" alt=""></div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <p class="summary">文库名称</p>
        <el-input
            v-model="house.name"
            autocomplete="off"
            placeholder="请输入文库名称"
        />
      </el-form-item>
      <el-form-item>
        <p class="summary">文库描述</p>
        <el-input
            type="textarea"
            :rows="3"
            resize="none"
            v-model="house.brief"
            autocomplete="off"
            placeholder="请输入文库描述"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="libraryVisible = false">取消</el-button>
        <el-button type="primary" @click="addHouse()">
          新建
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  删除确认框-->
  <el-dialog
      v-model="deleteVisible"
      title="提示"
      width="500"
  >
    <span>确定要删除文库{{ knowName }}?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteVisible = false">取消</el-button>
        <el-button type="primary" @click="sureDelete(item)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  重命名弹出框-->
  <el-dialog v-model="renameVisible" title="重命名" width="500">
    <el-form>
      <el-form-item label="文库名称">
        <el-input v-model="newName" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="renameVisible = false">取消</el-button>
        <el-button type="primary" @click="rename()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  权限修改确认框-->
  <!--  <el-dialog v-model="roleVisible" title="权限修改" width="500">-->
  <!--    <el-form>-->
  <!--      <el-form-item label="文库权限">-->
  <!--      </el-form-item>-->
  <!--      <el-form-item>-->
  <!--        <el-radio-group v-model="radio">-->
  <!--          <el-radio :value="user">私有</el-radio>-->
  <!--          <el-radio :value="6">协作</el-radio>-->
  <!--          <el-radio :value="9">开放</el-radio>-->
  <!--        </el-radio-group>-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->
  <!--    <template #footer>-->
  <!--      <div class="dialog-footer">-->
  <!--        <el-button @click="roleVisible = false">取消</el-button>-->
  <!--        <el-button type="primary" @click="rename()">-->
  <!--          确定-->
  <!--        </el-button>-->
  <!--      </div>-->
  <!--    </template>-->
  <!--  </el-dialog>-->
</template>
<script setup>
import {onMounted, ref} from "vue";
import Api from '../../api/index.ts'
import {Lock, EditPen, DeleteFilled} from "@element-plus/icons-vue";
import {ElMessage} from 'element-plus'
import axios from "axios";
import router from "@/router/index.js";

onMounted(() => {
  getOwn()
})

// 文库列表
const houseList = ref([])
const total = ref(0)
// 获取我创建所有的文库
const getOwn = () => {
  Api.getOwn().then(res => {
    if (res.code === 1) {
      ElMessage({
        message: "获取我创建的文库成功",
        type: 'success',
      })
      houseList.value = res.data.records;
      total.value = res.data.total
    } else {
      ElMessage({
        message: "获取我创建的文库失败",
        type: 'error',
      })
    }
  })
}

// 获取邀请协作的所有文库
const getAll = () => {
  Api.getAll().then((res) => {
    if (res.code === 1) {
      ElMessage({
        message: "获取邀请协作的文库成功",
        type: 'success',
      })
      houseList.value = res.data.records;
      total.value = res.data.total
    } else {
      ElMessage({
        message: "获取邀请协作的文库失败",
        type: 'error',
      })
    }
  })
}

// 新建文库弹窗
const libraryVisible = ref(false);

const showLibraryDialog = () => {
  libraryVisible.value = true;
};

const house = ref({
  name: "",
  brief: "",
});

// 添加封面图片
const coverImg = ref('')
const coverImgSrc = ref('')
const handleChange = (file, fileList) => {
      const formData = new FormData();
      formData.append("file", file.raw);
      axios.post('http://1.92.137.88:86/dcLibrary/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': localStorage.getItem('token')
        }
      }).then((res) => {
        if (res.data.code === 1) {
          ElMessage({
            message: '文库封面上传成功',
            type: 'success',
          })
          coverImg.value = res.data.code;
          coverImgSrc.value = res.data.data;
        } else {
          ElMessage({
            message: '文库封面上传失败',
            type: 'error',
          })
        }
      })
    }
;

const addHouse = () => {
  libraryVisible.value = false
  Api.addHouse(house.value.name, house.value.brief, coverImgSrc.value, 'knowledge').then((res) => {
    if (res.code === 1) {
      ElMessage({
        message: '新增文库' + house.value.name + '成功',
        type: 'success',
      })
      house.value.name = '';
      house.value.brief = ''
      if (flag.value === false) {
        getAll()
      } else {
        getOwn()
      }
    } else {
      ElMessage.error('新增文库' + house.value.name + '失败')
    }
  })
}

// 删除确认框
const knowName = ref("")
const knowId = ref("")
const deleteVisible = ref(false);

const openDelete = (item) => {
  knowId.value = item.id
  // knowName.value = item.value.name
  deleteVisible.value = true
}

const sureDelete = () => {
  deleteVisible.value = false;
  Api.deleteHouse(knowId.value).then((res) => {
    if (res.code === 1) {
      ElMessage({
        message: '删除文库' + knowName.value + '成功',
        type: 'success',
      })
      knowName.value = "";
      knowId.value = "";
      if (flag.value === false) {
        getAll()
      } else {
        getOwn()
      }
    } else {
      ElMessage.error('删除文库' + knowName.value + '失败')
    }
  })
}

// 重命名弹出框
const renameVisible = ref(false);
const newName = ref('');
const list = ref({})

const openRename = (item) => {
  renameVisible.value = true
  list.value = item;
}

const rename = () => {
  renameVisible.value = false
  list.value.name = newName.value;
  Api.setInfo(list.value).then((res) => {
    if (res.code === 1) {
      ElMessage({
        message: '重命名文库成功',
        type: 'success',
      })
      if (flag.value === false) {
        getAll()
      } else {
        getOwn()
      }
    } else {
      ElMessage.error('重命名文库失败')
    }
  })
}
// 权限修改框
// const roleVisible = ref(false)
// const openRole = (item) => {
//   roleVisible.value = true
// }

// 跳转详情页
const goDetail = (id) => {
  router.push({path: '/detail', query: {id: id}})
}

// 点击切换导航栏
const flag = ref(true)
const changeNavigation = () => {
  flag.value = !flag.value
  if (flag.value === false) {
    getAll()
  } else {
    getOwn()
  }
}


</script>
<style scoped lang="less">
.start {
  font-size: 21px;
  margin-left: 1.2vw;
  display: flex;
  padding-top: 18px;
  align-items: center;
  justify-content: flex-start;

  .addNew {
    margin-left: 20px;
  }
}

.navigation {
  width: 195px;
  background-color: #f5f5f5;
  padding: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 1.2vw;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;

  :hover {
    cursor: pointer;
  }

  div {
    padding: 6px 12px;
    border-radius: 6px;

    :hover {
      cursor: pointer;
    }
  }

  .active {
    background-color: #fff;
    color: #000;
  }
}

.box {
  margin: 40px 1.5vw 40px 1.2vw;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;

  .house {
    width: 21%;
    height: 160px;
    margin-right: 3%;
    margin-bottom: 36px;

    .card-header {
      font-size: 16px;
      height: 4px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .nameBox {
        display: flex;
        align-items: center;

        .nameIcon {
          margin-left: 4px;
          color: #aaa;
        }
      }
    }

    .el-dropdown-link:hover {
      cursor: pointer;
    }

    .detail {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      :hover {
        cursor: pointer;
      }

      .imgDetail {
        width: 80px;
        height: 80px;
        margin-right: 6px;
        border-radius: 8px;
      }

      .textDetail {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 5px;
        font-size: 16px;

        span {
          font-size: 13px;
        }

        .time {
          margin-bottom: 10px;
        }
      }
    }
  }
}

.page {
  position: fixed;
  bottom: 50px;
  right: 50px;
}

//新建文库弹窗
.summary {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.imgBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .uploadImg {
    border: 1px dashed #ccc;
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 120px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
  }

  :deep(.el-upload-dragger) {
    padding: 0;
  }

  .defaultImg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;

    .imgBig {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .imgSmall {
        width: 50px;
        height: 50px;
        overflow: hidden;
        margin: 8px 5px;
        border-radius: 8px;

        //img {
        //  width: 100%;
        //  height: 100%;
        //}
      }
    }


  }
}
</style>
